<template>
	<view>
		<view class="title">桌台信息</view>
		<view class="name-id">
			<view class="each">
				<view class="name">门店名称</view>
				<view class="z-flex">
					<!-- <view class="">台球桌-赤甲</view> -->
					<input type="text" v-model="info.name" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">门店电话</view>
				<view class="z-flex">
					<input type="number" v-model="info.mobile" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">商家微信</view>
				<view class="z-flex">
					<input type="number" v-model="info.wechat" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">营业时间</view>
				<view class="z-flex">
					<input type="text" v-model="info.tradetime" placeholder="请输入" />
					<!-- <view>{{info.tradetime}}</view> -->
					<!-- <image src="../../static/select-r.png" mode=""></image> -->
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">商家状态</view>
				<view class="z-flex" @click="tradeShow = true">
					<view style="color: #4BC264;" v-if="info.is_trade == 1">营业中</view>
					<view style="color: #4BC264;" v-else>休息中</view>
					<image src="../../static/right-l.png" mode=""></image>
				</view>
			</view>
			<u-picker @confirm="confirm" closeOnClickOverlay @close="tradeShow = false" @cancel="tradeShow = false" confirmColor="#4BC264" :show="tradeShow" :columns="columns"></u-picker>
		</view>
		
		<view class="name-id">
			<view class="each">
				<view class="name">下载二维码</view>
				<view class="z-flex">
					<image src="../../static/right-l.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="title">门店定位</view>
		<view class="name-id">
			<view class="each" @click="chooselocation">
				<view class="site-name">{{info.province}}{{info.city}}{{info.districts}}</view>
				<view class="z-flex">
					<image src="../../static/site.png" mode=""></image>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">详细地址</view>
				<view class="z-flex">
					<input type="text" v-model="info.address" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view class="title">定时开台</view>
		<view class="name-id">
			<view class="each">
				<view class="name">定时开台</view>
				<view class="z-flex" @click="timedShow = true">
					<view v-if="info.timed_show">显示</view>
					<view v-else>不显示</view>
					<image src="../../static/select-r.png" mode=""></image>
				</view>
			</view>
			<u-picker @confirm="confirm2" closeOnClickOverlay @close="timedShow = false" @cancel="timedShow = false" confirmColor="#4BC264" :show="timedShow" :columns="columns2"></u-picker>
			
			
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">计费方式</view>
				<view class="z-flex">
					<input type="number" v-model="info.charge_type" placeholder="请输入" />
					<text class="z-padding-l-8">分钟</text>
				</view>
			</view>
			<view class="explain">此处为起步消费结束之后的计费周期，即每X分钟收费Y元，建议设置不超过10分钟，否则会增加线上平台顾客投诉和差评，此处修改后本店所有桌台计费方式会统一修改，若想单独设置每个桌台，可在桌台管理中操作。</view>
		</view>
		
		<view class="title">预定信息</view>
		<view class="name-id">
			<view class="each">
				<view class="name">预定金额</view>
				<view class="z-flex">
					<view class="z-padding-r-24" style="color: #4BC264;">
						<input v-model="info.advance_price" type="number" placeholder="请输入" />
					</view>
					<view>元</view>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">预定时间</view>
				<view class="z-flex">
					<input type="number" v-model="info.advance_time" placeholder="请输入" />
					<text class="z-padding-l-8">分钟</text>
				</view>
			</view>
		</view>
		
		<view class="title">公告通知</view>
		<view class="name-id">
			<textarea v-model="info.notice" placeholder="请输入" name="" id="" cols="30" rows="10"></textarea>
		</view>
		
		<view class="title">WIFI信息</view>
		<view class="name-id">
			<view class="each">
				<view class="name">WIFI名称</view>
				<view class="z-flex">
					<input v-model="info.wifi_account" type="text" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">WIFI密码</view>
				<view class="z-flex">
					<input v-model="info.wifi_password" type="text" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view class="title">门禁锁信息</view>
		<view class="name-id">
			<view class="each">
				<view class="name">APP用户名</view>
				<view class="z-flex">
					<input v-model="info.app_account" type="text" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">APP密码</view>
				<view class="z-flex">
					<input v-model="info.app_password" type="text" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view class="title">微信二维码 <text><!-- （只支持jpg格式） --></text> </view>
		<view class="upload">
			<u-upload width="77" height="77" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
				multiple :maxCount="1">
				<image src="../../static/upload.png" mode="widthFix" style="width: 154rpx;height: 154rpx;">
				</image>
			</u-upload>
		</view>
		
		<view class="title">门头图片 <text><!-- （只支持jpg格式） --></text> </view>
		<view class="upload">
			<u-upload width="77" height="77" :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
				multiple :maxCount="1">
				<image src="../../static/upload.png" mode="widthFix" style="width: 154rpx;height: 154rpx;">
				</image>
			</u-upload>
		</view>
		
		<view class="title">门店大图 <text><!-- （只支持jpg格式） --></text> </view>
		<view class="upload">
			<u-upload width="77" height="77" :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3"
				multiple :maxCount="6">
				<image src="../../static/upload.png" mode="widthFix" style="width: 154rpx;height: 154rpx;">
				</image>
			</u-upload>
		</view>
		
		
		<view style="height: 180rpx; width: 1rpx"></view>
		<view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="save">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tradeShow:false,
				columns:[['休息中','营业中']],
				timedShow:false,
				columns2:[['不显示','显示']],
				fileList1: [],
				fileList2: [],
				fileList3: [],
				info:{}
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			save(){
				let wechat_image = [];
				this.fileList1.forEach(item => {
					wechat_image.push(item.ful || item.url)
				})
				this.info.wechat_image = wechat_image.join(',')
				
				let image = [];
				this.fileList2.forEach(item => {
					image.push(item.ful || item.url)
				})
				this.info.image = image.join(',')
				
				let images = [];
				this.fileList3.forEach(item => {
					images.push(item.ful || item.url)
				})
				this.info.images = images
				
				this.$api.post('/editStoreInfo',this.info).then(res => {
					if(res.code == 1){
						this.$toast('保存成功')
					}else {
						this.$toast(res.msg)
					}
				}).catch(res => {
					
				})
			},
			chooselocation() {
				this.$chooseLocation().then(res => {
					console.log(res,'!!!...')
					this.info.lat = res.lat
					this.info.lng = res.lng
					this.info.province = res.province
					this.info.city = res.city
					this.info.district = res.district
					this.info.address = res.name
				})
			},
			// 定时开启
			confirm2(e){
				this.info.timed_show = e.indexs[0]
				this.timedShow = false
			},
			//商家状态
			confirm(e){
				this.info.is_trade = e.indexs[0]
				this.tradeShow = false
			},
			getInfo(){
				this.$api.get('/editStoreInfo').then(res => {
					this.info = res.data
					if(res.data.wechat_image) {
						this.fileList1.push({url:this.$oss(res.data.wechat_image)})
					}
					if(res.data.image) {
						this.fileList2.push({url:this.$oss(res.data.image)})
					}
					if(res.data.images){
						res.data.images.map(item=>{
							let obj = {
								url:this.$oss(item)
							}
							this.fileList3.push(obj)
						})
					}
				}).catch(res => {
					
				})
			},
			
			// 图片处理
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			
				let lists = [].concat(event.file)
				// console.log(lists)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
			
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.$oss(result),
							ful: result
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}
			
				}
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.$uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(
									data.data.url
								)
							} else {
								resolve()
							}
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.title {
		font-weight: bold;
		font-size: 30rpx;
		color: #1C274C;
		padding: 40rpx 0 0 32rpx;
		text {
			font-size: 22rpx;
			color: #A4A9B7;
		}
	}
	
	.name-id {
		width: 622rpx;
		padding: 32rpx;
		margin: auto;
		background: #F7F8FA;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: 24rpx;
		
		.each {
			width: 558rpx;
			padding: 34rpx 32rpx;
			// height: 106rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1C274C;
			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #1c274c;
				text {
					color: red;
				}
			}
			.btn {
				width: 100rpx;
				height: 56rpx;
				background: #4BC264;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
			}
			.orange {
				background-color: #FF7B18;
			}
			.time-scope {
				font-weight: 500;
				font-size: 28rpx;
				color: #A4A9B7;
			}
			input {
				font-size: 28rpx;
				text-align: right;
				width: 360rpx;
			}
			image {
				width: 30rpx;
				height: 30rpx;
			}
			
			.site-name {
				width: 80%;
				font-weight: 500;
				font-size: 24rpx;
				color: #1C274C;
			}
		}
		.explain {
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
			line-height: 36rpx;
			padding: 24rpx 0 0 0;
		}
		
		
		textarea {
			width: 686rpx;
			height: 132rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #1C274C;
		}
	}
	
	.upload {
		margin: 32rpx 30rpx 0 30rpx;
	}
	
	
	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			background: #4bc264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 106rpx;
			text-align: center;
		}
	}
</style>
